<template>
    <t-breadcrumb :max-item-width="'150'" style="margin-bottom: 10px;">
        <t-breadcrumb-item> {{ $t('layout.aside.user') }}</t-breadcrumb-item>
    </t-breadcrumb>
    <t-space direction="horizontal">
        <span>{{ $t('common.name') }}:</span>
        <!-- 用户名 -->
        <t-input style="width: 140px;" size='small' v-model="searchValue.searchName" clearable
            :placeholder="$t('common.input.name')"></t-input>
        <t-button @click="searchChange" size="small">{{ $t('common.button.search') }}</t-button>
    </t-space>
    <!-- 表格内容 -->
    <t-table style="margin-top: 10px;" height="calc(100vh - 333px)" :pagination="pagination" size="small"
        row-key="index" :data="datas" :columns="columns">
        <!-- 头像 -->
        <template #avatar="{ row }">
            <t-avatar v-if="row.avatar != '00000000-0000-0000-0000-000000000000'" :image="imgUrl + row.avatar"
                :hide-on-load-failed="false" />
            <t-avatar v-else>无</t-avatar>
        </template>
        <template #creationTime="{ row }">
            {{ row.creationTime.replace('T', ' ').substr(0, 19) }}
        </template>
        <!-- 操作 -->
        <template #operation="{ row }">
            <t-space direction="horizontal" v-if="row.id !='e6384991-6857-4fa1-0547-08dd54aaabc3'">
                <t-button v-if="row.lockoutEnabled" size="small" theme='danger' @click="lockShow(row)">
                    {{ $t('user.lockout') }}
                </t-button>
                <t-button v-else size="small" theme='success' @click="lockShow(row)">
                    {{ $t('user.unLockout') }}
                </t-button>
            </t-space>
            
        </template>
    </t-table>

    <t-dialog closeOnOverlayClick :on-confirm="lockChange" v-model:visible="lockVisible" :header="data.lockoutEnabled?$t('user.lockContent'):$t('user.unLockContent')">
    </t-dialog>

</template>

<script setup>
import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';
import api from './api';
const imgUrl = api.file + '/GetFileById?id='


const searchValue = ref({
    pageIndex: 1,
    pageSize: 10,
    searchName: ''
})
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const columns = [{ colKey: 'nickName', title: t('user.name'), align: 'center' },
{ colKey: 'userName', title: t('user.account'), align: 'center' },
{ colKey: 'avatar', title: t('user.avatar'), align: 'center' },
{ colKey: 'sexName', title: t('user.gender'), align: 'center' },
{ colKey: 'phoneNumber', title: t('user.phone'), align: 'center' },
{ colKey: 'email', title: t('common.email'), align: 'center' },
{ colKey: 'creationTime', title: t('common.creationTime'), align: 'center' },
{ colKey: 'operation', title: t('common.operation'), width: '160', align: 'center' }]
const datas = ref([])
const data = ref({})
const pagination = ref({
    defaultPageSize: 20,
    total: 0,
    defaultCurrent: 1,
    size: 'small'
})
const lockVisible = ref(false)

const lockShow = (row)=>{
    data.value = JSON.parse(JSON.stringify(row))
    lockVisible.value = true
    console.log(row)
}
const lockChange = () => {
    console.log(1)
    api.lockout(data.value.id).then(res => {
        if(res.successed){
            lockVisible.value = false
            getUsers()
            MessagePlugin.success({content:res.message,duration:800})
        }else{
            MessagePlugin.error({content:res.message,duration:800})
        }
    })
}

const searchChange = () => {
    getUsers()
}

const getUsers = () => {
    api.getUsers(searchValue.value).then(res => {
        if (res.successed) {
            datas.value = res.datas
            pagination.value.total = res.total
        }
    })
}
getUsers()
</script>